<template>
  <div class="selected-courses">
	  <div class="statistics">
	    <a-row :gutter="16" >
	      <a-col :span="8">
	        <a-card title="已选课程总数" :bordered="false">
	          <h2>{{ courses.length }} 门</h2>
	        </a-card>
	      </a-col>
	      <a-col :span="8">
	        <a-card title="已获总学分" :bordered="false">
	          <h2>{{ totalCredits }} 学分</h2>
	        </a-card>
	      </a-col>
	      <a-col :span="8">
	        <a-card title="课程状态" :bordered="false">
	          <h2>{{ confirmedCount }} 门已确认</h2>
	        </a-card>
	      </a-col>
	    </a-row>
	  </div>
    <a-alert
      message="已选课程信息"
      description="以下是您当前已成功选中的课程列表，请注意课程时间和地点。"
      type="info"
      showIcon
      style="margin:15px 0;"
    />
    
    <a-table
      :columns="columns"
      :dataSource="courses"
      rowKey="id"
      :pagination="pagination"
    >
      <span slot="timeLocation" slot-scope="text, record">
        <div>{{ record.time }}</div>
        <div>{{ record.location }}</div>
      </span>

      <span slot="status" slot-scope="text, record">
        <a-tag :color="getStatusColor(record.status)">
          {{ record.status }}
        </a-tag>
      </span>

      <span slot="action" slot-scope="text, record">
        <a-popconfirm
          title="确定要退选该课程吗?"
          okText="确定"
          cancelText="取消"
          @confirm="handleWithdraw(record)"
          :disabled="!canWithdraw(record)"
        >
          <a-button 
            type="danger" 
            size="small"
            :disabled="!canWithdraw(record)"
          >
            退选
          </a-button>
        </a-popconfirm>
        <a-tooltip v-if="!canWithdraw(record)" :title="getDisabledReason(record)">
          <a-icon type="question-circle" style="margin-left: 8px" />
        </a-tooltip>
      </span>
    </a-table>
    
   
  </div>
</template>

<script>
	// 真实课程数据
	const REAL_COURSES = [{
			id: 'CS101',
			name: '计算机科学导论',
			credit: 3,
			teacher: '李红梅',
			time: 'Mon-1,2',
			location: '1号教学楼',
			enrolled: 45,
			capacity: 60,
			type: 'required',
			requirePrerequisite: false
		},
		{
			id: 'CS301',
			name: '数据结构与算法',
			credit: 4,
			teacher: '李红梅',
			time: 'Mon-3,4',
			location: '2号教学楼',
			enrolled: 38,
			capacity: 45,
			type: 'required',
			requirePrerequisite: true,
			prerequisite: 'CS101'
		}
	];
const columns = [
  {
    title: '课程编号',
    dataIndex: 'id',
    key: 'id',
    width: 100
  },
  {
    title: '课程名称',
    dataIndex: 'name',
    key: 'name',
    width: 150
  },
  {
    title: '学分',
    dataIndex: 'credit',
    key: 'credit',
    width: 80
  },
  {
    title: '任课教师',
    dataIndex: 'teacher',
    key: 'teacher',
    width: 120
  },
  {
    title: '时间/地点',
    key: "timeLocation",
    scopedSlots: { customRender: 'timeLocation' },
    width: 180
  },
  {
    title: '课程状态',
    key: 'status',
    scopedSlots: { customRender: 'status' },
    width: 100
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
    width: 100
  }
];

export default {
  data() {
    return {
      columns,
            pagination: {
              current: 1,
              pageSize: 10,
              total: 0,
              showSizeChanger: true,
              pageSizeOptions: ['10', '20', '50'],
              showTotal: total => `共 ${total} 门已选课程`
            },
            courses: [
              {
                id: 'CS101',
                name: '计算机科学导论',
                credit: 3,
                teacher: '李红梅',
                time: 'Mon-1,2',
                location: '1号教学楼',
                status: '已确认',
                canWithdraw: true
              },
              {
                id: 'MATH201',
                name: '高等数学（上）	',
                credit: 4,
                teacher: '李娜',
                time: 'Tue-3,4',
                location: '2号教学楼',
                status: '已确认',
                canWithdraw: true
              }
            ]
    };
  },
  computed: {
    totalCredits() {
      return this.courses.reduce((sum, course) => sum + course.credit, 0);
    },
    confirmedCount() {
      return this.courses.filter(c => c.status === '已确认').length;
    }
  },
  methods: {
    getStatusColor(status) {
      const colors = {
        '已确认': 'green',
        '待抽签': 'orange'
      };
      return colors[status] || 'blue';
    },
    
    canWithdraw(course) {
      return course.canWithdraw && course.status === '已确认';
    },
    
    getDisabledReason(course) {
      if (!course.canWithdraw) {
        return '该课程不允许退选';
      }
      if (course.status !== '已确认') {
        return `课程状态为${course.status}，不可退选`;
      }
      return '不可退选';
    },
    
    handleWithdraw(course) {
      this.$confirm({
              title: '确认退选该课程吗?',
              content: `课程名称: ${course.name}\n退选后如需再次选择需重新选课`,
              onOk: () => {
                this.courses = this.courses.filter(c => c.id !== course.id);
                this.$message.success(`已成功退选课程: ${course.name}`);
                this.$emit('withdraw', course.id);
              }
            });
    }
  }
};
</script>

<style scoped>
.selected-courses {
	padding:20px;
	padding-top:0;
}
</style>